<!-- 我的 - 帮助与反馈 - 提交反馈 -->
<template>
  <view>
    <z-navbar title="意见反馈" :border-bottom="true"></z-navbar>
    <view class="px-4">
      <!-- 未反馈 -->
      <view v-if="!state.isSubmit">
        <!-- 问题和意见 -->
        <view class="label mt-5 mb-2">
          <view class="w-6 h-36 bg-#F4AF22" />
          <view class="ml-4 mr-2 c-#333 text-32 font-bold">问题和意见</view>
        </view>
        <view class="relative">
          <image class="absolute top-36 left-0 w-28 h-24 z-2 ml-4" src="/static/images/home/ic_edit.png"></image>
          <u-input v-model="state.content" type="textarea" height="330" auto-height maxlength="200"
            placeholder="请填写10个字以上问题描述以便我们提供更好的帮助" placeholder-style="color: #999; fontSize: 24rpx"
            :custom-style="inputStyle" />
          <view class="absolute bottom-30 right-30 z-2 c-#999 text-24">{{ enteredNum }}/200</view>
        </view>
        <!-- 图片 -->
        <view class="label mt-5 mb-2">
          <view class="w-6 h-36 bg-#F4AF22" />
          <view class="ml-4 mr-2 c-#333 text-32 font-bold">图片({{ imageCount }}/3)</view>
          <view class="c-#F4AF22 text-24">选填，提供问题截图</view>
        </view>
        <view class="bg-#F6F6F6 p-4">
          <z-file-upload ref="uploader" width="144" height="144" maxCount="3">
            <template #addBtn>
              <view class="w-144 h-144 flex justify-center items-center bg-white rounded-1.5">
                <u-icon name="plus" color="#ccc" size="74" />
              </view>
            </template>
          </z-file-upload>
        </view>
        <!-- 联系电话 -->
        <!-- <view class="label mt-5 mb-2">
          <view class="w-6 h-36 bg-#F4AF22" />
          <view class="ml-4 mr-2 c-#333 text-32 font-bold">联系电话</view>
        </view>
        <u-input v-model="state.mobile" placeholder="请输入联系方式，方便我们与您取得联系" :placeholder-style="placeholderStyle"
          :custom-style="customStyle" type="number" /> -->
      </view>
      <!-- 已反馈 -->
      <view v-else class="flex flex-col items-center mt-15">
        <image class="w-368 h-368" src="/static/images/user/img_feedback_empty.png"></image>
        <view class="mt-8 c-#333 text-28">感谢反馈，我们将在2个工作日内给您答复~ </view>
      </view>
    </view>
    <view v-if="!state.isSubmit" class="bottom-wrap-16 bg-white">
      <u-line class="w-full" color="#eee" :hair-line="false" />
      <view class="btn-submit mt-1" @click="onSubmit">提交</view>
    </view>
  </view>
</template>

<script setup>
import { showToast } from '@/common/util/uni'
import { postHelpAdd } from '@/common/http/module/user'

const state = reactive({
  isSubmit: false,
  content: '',
  // mobile: ''
})

const inputStyle = {
  backgroundColor: '#F6F6F6',
  padding: '32rpx 32rpx 32rpx 70rpx',
  borderRadius: '12rpx'
}
const placeholderStyle = {
  color: '#999',
  fontSize: '28rpx'
}
const customStyle = {
  padding: '16rpx 36rpx',
  color: '#333',
  fontSize: '28rpx',
  backgroundColor: '#F6F6F6',
  borderRadius: '12rpx'
}

const uploader = ref()
const enteredNum = computed(() => state.content.length > 200 ? 200 : state.content.length)
const imageCount = computed(() => uploader.value?.getList()?.length || 0)

// 提交反馈
function onSubmit() {
  if (!state.content) {
    showToast('请输入反馈内容', 'none')
  }
  if (!uploader.value.isAllUploaded()) return
  const params = {
    content: state.content,
    // mobile: state.mobile,
    images: uploader.value.getUploadedList()?.map(item => item.serverUrl)?.join(',')
  }
  postHelpAdd(params).then(() => {
    state.isSubmit = true
  })
}
</script>

<style lang="scss" scoped>
.label {
  display: flex;
  align-items: center;

}
</style>
